<template>
  <div class="pageWrapper">
    <el-row>
      <div class="bread">
        <span>酒店</span>
        <i class="el-icon-arrow-right"></i>
        <span>{{ cityData.name }}酒店预订</span>
      </div>
    </el-row>
    <!-- 搜索表单 -->
    <HotelSearch />

    <!-- 地图 -->
    <el-row class="mapPart">
      <el-col :span="14">
        <el-row class="area">
          <el-col :span="2">区域:</el-col>
          <el-col :span="20" class="spot" v-if="cityData.id">
            <span v-for="scenic in scenicFrontList" :key="scenic.id">{{
              scenic.name
            }}</span>
            <div v-if="isScenicShow">
              <span v-for="scenic in scenicRemainList" :key="scenic.id">{{
                scenic.name
              }}</span>
            </div>
            <div class="allArea" @click="isScenicShow = !isScenicShow">
              <i class="el-icon-arrow-down" v-if="!isScenicShow"></i
              ><i class="el-icon-arrow-up" v-if="isScenicShow"></i>等{{
                cityData.scenics.length
              }}个区域
            </div>
          </el-col>
        </el-row>
        <el-row class="average">
          <el-col :span="2">
            <span class="text">均价</span><span>:</span>
            <el-tooltip
              effect="dark"
              content="等级均价由平日价格计算得出,节假日价格会有上浮。"
              placement="top-start"
            >
              <i class="question">?</i>
            </el-tooltip>
          </el-col>
          <el-col :span="5">
            <el-tooltip
              class="item"
              effect="dark"
              content="等级评定是针对房价,设施和服务等各方面水平的综合评估。"
              placement="bottom-start"
            >
              <span
                ><i class="el-icon-grape"></i><i class="el-icon-grape"></i
                ><i class="el-icon-grape"></i>￥332</span
              >
            </el-tooltip>
          </el-col>
          <el-col :span="6">
            <el-tooltip
              class="item"
              effect="dark"
              content="等级评定是针对房价,设施和服务等各方面水平的综合评估。"
              placement="bottom-start"
            >
              <span
                ><i class="el-icon-grape"></i><i class="el-icon-grape"></i
                ><i class="el-icon-grape"></i
                ><i class="el-icon-grape"></i>￥520</span
              >
            </el-tooltip>
          </el-col>
          <el-col :span="7">
            <el-tooltip
              class="item"
              effect="dark"
              content="等级评定是针对房价,设施和服务等各方面水平的综合评估。"
              placement="bottom-start"
            >
              <span
                ><i class="el-icon-grape"></i><i class="el-icon-grape"></i
                ><i class="el-icon-grape"></i><i class="el-icon-grape"></i
                ><i class="el-icon-grape"></i>￥1168</span
              >
            </el-tooltip>
          </el-col>
        </el-row>
      </el-col>
      <el-col
        :span="10"
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
      >
        <div id="container" class="container"></div>
      </el-col>
    </el-row>

    <!-- 过滤器 -->
    <HotelFilter />

    <!-- 酒店列表 -->
    <div
      :class="{ isLoading: loading, hotelList }"
      v-loading="loading"
      element-loading-spinner="el-icon-loading"
    >
      <HotelItem :hotelList="hotelList" v-if="!loading" />
      <div class="noData" v-if="hotelList.length == 0">暂无符合条件的酒店</div>
    </div>

    <!-- 分页组件 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import LoginFormVue from "~/components/user/LoginForm.vue";
export default {
  data() {
    return {
      isScenicShow: false,
      hotelList: [],
      cityData: {},
      scenicFrontList: [],
      scenicRemainList: [],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      cityName: "",
      map: {},
      loading: false,
    };
  },

  created() {},

  watch: {
    $route: {
      handler() {
        // 检测到如果url没有params,或者cityName是空则给上cityName=历史记录中的城市名
        if (
          Object.keys(this.$route.query).length == 0 ||
          this.$route.query.cityName == ""
        ) {
          // console.log(111);
          this.$router.replace({
            path: "/hotel",
            query: {
              cityName: this.$store.state.history.hotelCity,
            },
          });

          // 弹出信息弹框
          this.$alert(
            `当前定位到${this.$store.state.history.hotelCity}`,
            "提示",
            {
              type: "success",
              confirmButtonText: "确定",
            }
          );
        }
        // console.log("进入了监听器");
        this.updateHotelList();
      },
      immediate: true,
    },
  },

  mounted() {
    window.onLoad = () => {
      var map = new AMap.Map("container", {
        zoom: 20, //级别
        center: [113.428072, 23.129259], //中心点坐标
        viewMode: "3D", //使用3D视图
      });

      this.map = map;
    };

    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=ba73350c7105f561cfc60dfa2679fcb6&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },

  methods: {
    // 更新获取酒店列表
    async updateHotelList() {
      this.loading = true;
      // url参数对象
      const data = { ...this.$route.query };
      // 当url的cityName不等于当前cityData里面的name时,重新获取cityData
      if (data.cityName) {
        if (data.cityName != this.cityData.name) {
          await this.updateCityData();
        }
        delete data.cityName;
        data.city = this.cityData.id;
      }

      // console.log(data);
      // url参数字符串
      let queryString = "";
      // 拼接所有请求参数
      Object.keys(data).forEach((key) => {
        // console.log(key, data[key]);
        if (Array.isArray(data[key])) {
          if (key == "hotellevel") {
            data[key].forEach((item) => {
              // console.log(item);
              queryString += "&hotellevel_in=" + item;
            });
          }

          if (key == "hoteltype") {
            data[key].forEach((item) => {
              // console.log(item);
              queryString += "&hoteltype_in=" + item;
            });
          }

          if (key == "hotelasset") {
            data[key].forEach((item) => {
              // console.log(item);
              queryString += "&hotelasset_in=" + item;
            });
          }

          if (key == "hotelbrand") {
            data[key].forEach((item) => {
              // console.log(item);
              queryString += "&hotelbrand_in=" + item;
            });
          }
        } else {
          queryString += `&${key}=${data[key]}`;
        }
      });

      // 去除请求参数字符串的第一个字符
      queryString = queryString.substring(1);
      // console.log(queryString);

      let hotelRes = await this.$axios({
        url: "/hotels?" + queryString,
      });
      // console.log("更新了列表数据");
      // console.log(hotelRes.data);
      this.hotelList = hotelRes.data.data;
      this.total = hotelRes.data.total;
      // 如果获取的酒店列表数组不为空时才重加载地图
      if (this.hotelList.length > 0) {
        this.loadMap();
      }
      this.loading = false;
    },

    // 更新获取cityData
    async updateCityData() {
      let cityRes = await this.$axios({
        url: "/cities",
        params: {
          name: this.$route.query.cityName,
        },
      });
      this.cityData = cityRes.data.data[0];
      // console.log("更新了城市数据");
      // console.log(this.cityData);
      // 切割景点列表数据为两个数组
      this.scenicFrontList = cityRes.data.data[0].scenics.slice(0, 16);
      this.scenicRemainList = cityRes.data.data[0].scenics.slice(16);
    },

    handleSizeChange(newSize) {
      this.pageSize = newSize;
      // 添加_limit参数,并返回到第一页,删除_start参数
      this.pageIndex = 1;
      let query = { ...this.$route.query, _limit: newSize };
      delete query._start;
      this.$router.replace({
        path: "/hotel",
        query: query,
      });
      // console.log(query);
    },

    handleCurrentChange(newIndex) {
      this.pageIndex = newIndex;
      // 添加_start参数
      let query = {
        ...this.$route.query,
        _start: (newIndex - 1) * this.pageSize,
      };
      this.$router.replace({
        path: "/hotel",
        query,
      });
      // console.log(query);
    },

    // 渲染酒店定点在地图上
    loadMap() {
      this.map = new AMap.Map("container", {
        zoom: 10, //级别
        center: [
          this.hotelList[0].location.longitude,
          this.hotelList[0].location.latitude,
        ], //中心点坐标
        viewMode: "3D", //使用3D视图
      });

      let markerList = [];
      this.hotelList.forEach((hotel, index) => {
        // console.log(hotel);
        // console.log(this.map);
        // let content = `<div class="marker-route marker-marker-bus-from">${index}</div>`;
        var marker = new AMap.Marker({
          // 将 html 传给 content
          content: `<div class="custom-content-marker">
              <div class="port" style="position: relative;width: 25px ;height: 34px ;">
                 <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width:25px;height:34px;">
                  <div class="number" style="position: absolute ;top: -14px;right: 5px;width: 15px ;height: 15px ;font-size: 12px ;background: #318ff4 ;border-radius: 50% ;color: #fff ;text-align: center ;line-height: 15px ;">${
                    index + 1
                  }</div>
              </div>
              </div>
            `,
          position: [hotel.location.longitude, hotel.location.latitude], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: hotel.name,
        });
        markerList.push(marker);
      });
      this.map.add(markerList);
      // console.log(markerList);
    },
  },
};
</script>

<style lang="less" scoped>
.pageWrapper {
  width: 1000px;
  margin: 0 auto;
  font-size: 14px;
  color: #606266;

  .bread {
    padding: 20px 0;
  }

  .mapPart {
    // height: 260px;
    .area {
      margin-bottom: 20px;
      .spot {
        span {
          margin-right: 14px;
        }
      }
    }

    .average {
      position: relative;
      .text {
        margin-right: 15px;
      }
      .question {
        position: absolute;
        left: 27px;
        top: -3px;
        background-color: #6cf;
        padding: 0 5px;
        border-radius: 50%;
        font-size: 12px;
        color: #fff;
      }

      .el-icon-grape {
        color: tomato;
      }
    }

    .container {
      height: 260px;
    }
  }
}

.isLoading {
  height: 100px;
}

.noData {
  margin-top: 50px;
  text-align: center;
  font-size: 24px;
  color: tomato;
}

.pagination {
  text-align: center;
  padding: 50px 0;
}

/deep/ .el-icon-loading {
  font-size: 80px;
}
</style>